<template>
  <view class="container">
    <!-- 公司头部信息 -->
    <view class="company-header">
      <image 
        :src="companyInfo.logoUrl || '/static/images/default-logo.png'" 
        mode="aspectFit" 
        class="company-logo"
      ></image>
      <view class="company-basic">
          <view class="company-name">{{ companyInfo.companyName || '未知公司' }}</view>
          <view class="company-tags">
            <text class="tag" v-for="(tag, index) in (companyInfo.industryTags || [])" :key="index">{{ tag }}</text>
          </view>
          <view class="company-meta">
            <text class="meta-item">{{ companyInfo.companyIndustry || '未知行业' }}</text>
            <text class="meta-item">{{ companyInfo.companyScale || '规模未知' }}</text>
            <text class="meta-item">{{ companyInfo.companyAddress || '地址未知' }}</text>
          </view>
        <view class="company-rating">
          <!-- <text class="rating-num">{{ companyInfo.rating !== undefined ? companyInfo.rating.toFixed(1) : '0.0' }}</text> -->
          <!-- <text class="rating-desc">{{ companyInfo.ratingDesc || '暂无评分' }}</text> -->
          
        </view>
      </view>
	  
      <button class="review-btn" @click="goToPublish">写评价</button>
    </view>

    <!-- 评分详情 -->
    <view class="rating-detail">
      <view class="rating-overview">
        <text class="big-score" v-if="companyOverallRating!=0">{{ companyOverallRating !== undefined ? companyOverallRating.toFixed(1) : '0.0' }}</text>
		<text class="big-score-error" v-if="companyOverallRating==0">暂无可参考评分</text>
        <text class="score-desc">综合评分</text>
      </view>
      <view class="rating-categories">
        <view class="rating-item" v-for="(dimension, index) in ratingDimensions" :key="index">
          <text class="category">{{ dimension.name }}</text>
          <view class="progress-bar">
            <view class="progress" :style="{ width: (dimension.score / 5 * 100) + '%' }"></view>
          </view>
          <text class="category-score">{{ dimension.score !== undefined ? dimension.score.toFixed(1) : '0.0' }}</text>
        </view>
      </view>
    </view>

    <!-- 公司简介 -->
    <view class="company-intro">
      <view class="section-title">公司简介</view>
      <view class="intro-content">
        {{ companyInfo.companyAbout || companyInfo.description || '暂无公司简介' }}
      </view>
    </view>

    <!-- 员工评价 -->
    <view class="reviews-section">
      <view class="section-title">
        <text>员工评价</text>
		<text class="review-count">{{ reviews.rows.length || 0 }}条评论</text>
        
		
      </view>
	  
      <view class="review-list">
		  
        <view class="review-item" v-for="(review, index) in reviews.rows" :key="index">
          <view class="review-header">
            <image :src="review.avatarUrl" mode="aspectFill" class="user-avatar"></image>
            <view class="user-info">
              <view class="user-name">{{ review.nickName }}</view>
              <view class="user-position">最后编辑时间：{{ review.updatedAt }}</view>
            </view>
            <text class="review-time">{{ review.createdAt }}</text>
          </view>
          <view class="review-score">
            <uni-rate :value="reviewScores[review.id] || review.score" readonly="true" size="14" color="#FF6600" />
            <text style="margin-left: 5px;">{{ reviewScores[review.id] || (review.score !== undefined ? review.score.toFixed(1) : '0.0') }}</text>
          </view>
          <view class="review-content">{{ review.content }}</view>
          <view class="review-pros-cons" v-if="review.pros || review.cons">
            <view class="pros" v-if="review.pros">
              <text class="label">优点：</text>
              <text class="content">{{ review.pros }}</text>
            </view>
            <view class="cons" v-if="review.cons">
              <text class="label">缺点：</text>
              <text class="content">{{ review.cons }}</text>
            </view>
          </view>
          <view class="review-metrics">
            <view class="metric-item" @click="likeReview(review.id)">
              <uni-icons :type="review.liked ? 'heart-filled' : 'heart'" :color="review.liked ? '#36D' : '#999'" size="18"></uni-icons>
              <text :class="{ liked: review.liked }">{{ review.likes }}</text>
            </view>
            <view class="metric-item" @click="collectReview(review.id)">
              <uni-icons :type="review.collected ? 'star-filled' : 'star'" :color="review.collected ? '#FFD700' : '#999'" size="18"></uni-icons>
              <text>{{ review.collected ? '已收藏' : '收藏' }}</text>
            </view>
            <view class="metric-item" @click="toReviewComments(review.id)">
              <uni-icons type="chat" color="#999" size="18"></uni-icons>
              <text>{{ review.comments }}</text>
            </view>
            <view class="metric-item" @click="viewReviewDetail(review.id)">
              <text style="color: #36D;">查看详情</text>
            </view>
          </view>
        </view>
        <view class="load-more" @click="loadMoreReviews" v-if="!loadingMore && hasMore">
          点击加载更多
        </view>
        <view class="load-more" v-if="loadingMore">
          加载中...
        </view>
      </view>
	  <text class="filter" @click="showFilterPopup = true">
	    筛选
	    <uni-icons v-if="hasActiveFilter" type="uni-icons-checkmarkempty" size="14" color="#36D"></uni-icons>
	  </text>
    </view>

    <!-- 筛选弹窗 -->
    <uni-popup ref="filterPopup" type="bottom" v-model="showFilterPopup">
      <view class="filter-popup">
        <view class="filter-content">
          <view class="filter-title">筛选</view>
          
          <view class="filter-group">
            <text class="filter-label">部门</text>
            <view class="filter-items">
              <view 
                class="filter-item" 
                :class="{ active: selectedDept === option.value }"
                v-for="(option, index) in deptOptions" 
                :key="index"
                @click="selectedDept = option.value"
              >
                {{ option.label }}
              </view>
            </view>
          </view>
          
          <view class="filter-group">
            <text class="filter-label">职位</text>
            <view class="filter-items">
              <view 
                class="filter-item" 
                :class="{ active: selectedPosition === option.value }"
                v-for="(option, index) in positionOptions" 
                :key="index"
                @click="selectedPosition = option.value"
              >
                {{ option.label }}
              </view>
            </view>
          </view>
          
          <view class="filter-group">
            <text class="filter-label">评分</text>
            <view class="filter-items">
              <view 
                class="filter-item" 
                :class="{ active: selectedRating === option.value }"
                v-for="(option, index) in ratingOptions" 
                :key="index"
                @click="selectedRating = option.value"
              >
                {{ option.label }}
              </view>
            </view>
          </view>
          
          <view class="filter-buttons">
            <button class="reset-btn" @click="resetFilter">重置</button>
            <button class="confirm-btn" @click="applyFilter">确定</button>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getCompanyDetail, getRatingDimensions, getUserReviews, getReviewRatings, likeReview, collectReview, getCompanyDimensionRatings, getCompanyOverallScore } from '@/api/company.js';

export default {
  data() {
    return {
      companyId: '',
      companyInfo: {},
      companyOverallRating: 0,
      ratingDimensions: [],
      reviews: {
	  rows:[],
	  pageNum:1,
	  pageSize:10
	},
      reviewScores: {}, // 存储每个评价的综合评分
      filteredReviews: [],
      loadingMore: false,
      currentPage: 1,
      hasMore: true,
      
      // 筛选相关数据
      showFilterPopup: false,
      selectedDept: '',
      selectedPosition: '',
      selectedRating: '',
      deptOptions: [
        { label: '全部', value: '' },
        { label: '研发部', value: '研发部' },
        { label: '产品部', value: '产品部' },
        { label: '设计部', value: '设计部' },
        { label: '市场部', value: '市场部' },
        { label: '运营部', value: '运营部' },
        { label: '人事部', value: '人事部' },
        { label: '财务部', value: '财务部' }
      ],
      positionOptions: [
        { label: '全部', value: '' },
        { label: '实习生', value: '实习生' },
        { label: '专员', value: '专员' },
        { label: '主管', value: '主管' },
        { label: '经理', value: '经理' },
        { label: '总监', value: '总监' },
        { label: '副总裁', value: '副总裁' },
        { label: '总裁', value: '总裁' }
      ],
      ratingOptions: [
        { label: '全部', value: '' },
        { label: '5星', value: '5' },
        { label: '4星以上', value: '4' },
        { label: '3星以上', value: '3' },
        { label: '2星以上', value: '2' },
        { label: '1星以上', value: '1' }
      ]
    };
  },
  
  computed: {
    hasActiveFilter() {
      return this.selectedDept !== '' || this.selectedPosition !== '' || this.selectedRating !== '';
    }
  },
  
  onLoad(options) {
    this.companyId = options.id;
    this.loadCompanyDetail();
    this.loadRatingData();
    this.loadUserReviews();
  },
  
  methods: {
    // 加载公司详情
    async loadCompanyDetail() {
      try {
        const res = await getCompanyDetail(this.companyId);
        if (res && res.data) {
          this.companyInfo = res.data;
          // 处理行业标签
          if (this.companyInfo.industryTags) {
            if (typeof this.companyInfo.industryTags === 'string') {
              this.companyInfo.industryTags = this.companyInfo.industryTags.split(',');
            }
          } else {
            this.companyInfo.industryTags = [];
          }
        }
      } catch (error) {
        console.error('加载公司详情失败:', error);
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      }
    },
    
    // 计算单个评价的综合评分
    calculateReviewAverageScore(ratings) {
      if (!ratings || ratings.length === 0) return 0;
      const total = ratings.reduce((sum, rating) => sum + parseFloat(rating.score || 0), 0);
      return (total / ratings.length).toFixed(1);
    },
    
    // 获取并设置单个评价的综合评分
    async fetchReviewScore(reviewId) {
      try {
        const res = await getReviewRatings(
		{ 
			reviewId ,
			pageNum:1,
			pageSize:10 
		}
		);
        if (res && res.rows && res.rows.length > 0) {
          const avgScore = this.calculateReviewAverageScore(res.rows);
          this.$set(this.reviewScores, reviewId, avgScore);
          return avgScore;
        }
      } catch (error) {
        console.error(`获取评价 ${reviewId} 的综合评分失败:`, error);
      }
      return 0;
    },
    
    // 为所有评价获取综合评分
    async fetchAllReviewScores(reviewList) {
      for (const review of reviewList) {
        await this.fetchReviewScore(review.id);
      }
    },
    
    // 加载评分维度和综合评分
    async loadRatingData() {
      try {
        console.log('开始加载评分数据，companyId:', this.companyId);
        
        // 获取评分维度列表（包含status控制显隐）
        const dimensionsRes = await getRatingDimensions({
          pageNum: 1,
          pageSize: 10,
          status: 1 // 只获取启用状态的维度
        });
        
        // 注意：根据控制台输出，接口返回的数据结构与预期不同
        // 综合评分接口实际返回了维度评分数据，维度评分接口实际返回了综合评分数据
        // 这里我们按实际数据结构处理
        const overallRes = await getCompanyOverallScore({
          companyId: this.companyId,
          pageNum: 1,
          pageSize: 10
        });
        
        const dimensionRes = await getCompanyDimensionRatings({
          companyId: this.companyId,
          pageNum: 1,
          pageSize: 10
        });
        
        console.log('维度名称接口返回数据:', JSON.stringify(dimensionsRes));
        console.log('维度评分数据接口(实际从综合评分接口获取):', JSON.stringify(dimensionRes));
        console.log('综合评分数据接口(实际从维度评分接口获取):', JSON.stringify(overallRes));
        
        // 处理企业综合评分 - 从维度评分接口获取（实际是综合评分数据）
        if (overallRes && overallRes.data) {
          let overallData = overallRes.data;
          // 确保处理多种可能的数据结构
          if (!Array.isArray(overallData)) {
            if (overallData.list) overallData = overallData.list;
            else if (overallData.rows) overallData = overallData.rows;
            else overallData = [];
          }
          
          // 检查数组中是否有overallScore字段
          if (overallData.length > 0 && overallData[0].overallScore !== undefined) {
            this.companyOverallRating = parseFloat(overallData[0].overallScore);
            console.log('从综合评分接口获取到评分:', this.companyOverallRating);
          }
        }
        
        // 如果综合评分接口没有数据，尝试从companyInfo中获取
        if (this.companyOverallRating === 0 && this.companyInfo && this.companyInfo.rating) {
          this.companyOverallRating = parseFloat(this.companyInfo.rating);
          console.log('从companyInfo中获取到评分:', this.companyOverallRating);
        }
        
        // 如果仍然没有评分，使用默认值
        if (this.companyOverallRating === 0) {
          this.companyOverallRating = 0.0;
          console.log('使用默认评分:', this.companyOverallRating);
        }
        
        // 合并维度和评分数据，只显示启用状态的维度
        this.ratingDimensions = [];
        if (dimensionsRes && dimensionsRes.rows) {
          // 过滤出启用状态的维度并按sortOrder排序
          const enabledDimensions = dimensionsRes.rows
            .filter(dim => dim.status === 1)
            .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
          
          console.log('启用的维度数量:', enabledDimensions.length);
          enabledDimensions.forEach(dim => {
            console.log(`维度详情: ID=${dim.id}, name=${dim.name}, description=${dim.description}`);
          });
          
          // 从综合评分接口获取评分数据（实际是维度评分数据）
          let ratingsData = [];
          if (dimensionRes && dimensionRes.data) {
			 
            if (Array.isArray(dimensionRes.data)) {
              ratingsData = dimensionRes.data;
            } else if (dimensionRes.data.list) {
              ratingsData = dimensionRes.data.list;
            } else if (dimensionRes.data.rows) {
              ratingsData = dimensionRes.data.rows;
            }
          }
          
          console.log('评分数据列表:', ratingsData.map(item => ({
            dimensionId: item.dimensionId,
            avgScore: item.avgScore
          })));
          
          // 合并评分数据
          this.ratingDimensions = enabledDimensions.map(dim => {
            // 直接查找匹配的评分
            const matchingRating = ratingsData.find(item => {
              // 确保两个ID类型一致（可能是字符串或数字）
			  console.log("item.dimensionId",item.dimensionId)
			  console.log("dim.id",dim.id)
              return String(item.dimensionId) === String(dim.id);
            });
            
            // 使用从接口获取的avgScore值
            let finalScore = 0;
            if (matchingRating && matchingRating.avgScore !== undefined && matchingRating.avgScore !== null) {
              finalScore = parseFloat(matchingRating.avgScore);
              console.log(`维度 ${dim.id}(${dim.name}) 找到匹配评分: ${matchingRating.avgScore} -> ${finalScore}`);
            } else {
              console.log(`维度 ${dim.id}(${dim.name}) 未找到匹配评分，保持值为0`);
            }
            
            return {
              id: dim.id,
              name: dim.description || dim.name || '未知维度',
              score: finalScore, // 直接使用找到的评分
              scoreCount: matchingRating && matchingRating.scoreCount ? matchingRating.scoreCount : 0
            };
          });
        }
        
        // 如果没有启用的维度或评分数据，使用默认维度
        if (this.ratingDimensions.length === 0) {
          console.log('未获取到有效维度数据，使用默认维度');
          this.ratingDimensions = [
            { name: '薪资待遇', score: 4.5 },
            { name: '工作环境', score: 4.0 },
            { name: '企业文化', score: 4.2 },
            { name: '发展前景', score: 4.1 },
            { name: '工作生活平衡', score: 4.3 }
          ];
        }
        
        // 记录最终的评分数据
        console.log('最终评分维度数据:', JSON.stringify(this.ratingDimensions.map(d => ({name: d.name, score: d.score}))));
        console.log('最终综合评分:', this.companyOverallRating);
      } catch (error) {
        console.error('加载评分数据失败:', error);
        // 设置默认评分数据
        this.companyOverallRating = 4.2;
        this.ratingDimensions = [
          { name: '薪资待遇', score: 4.5 },
          { name: '工作环境', score: 4.0 },
          { name: '企业文化', score: 4.2 },
          { name: '发展前景', score: 4.1 },
          { name: '工作生活平衡', score: 4.3 }
        ];
        uni.showToast({
          title: '评分加载失败，显示默认值',
          icon: 'none'
        });
      }
    },
    
    // 加载用户评价
    async loadUserReviews() {
      try {
        const params = {
          companyId: this.companyId,
          pageNum: 1,
          pageSize: 10
        };
        
        const res = await getUserReviews(params);
        if (res) {
		
			this.reviews={
				rows:res.rows,
				pageNum:res.pageNum,
				pageSize:res.pageSize
			}
			console.log("reviews:",this.reviews)
            
            // 为所有评价获取综合评分
            await this.fetchAllReviewScores(res.rows);
        }
      } catch (error) {
        console.error('加载用户评价失败:', error);
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      }
    },
    
    // 加载评价统计信息
    async loadReviewRatings() {
      try {
        const res = await getReviewRatings(
            {
              companyId:this.companyId,
              pageNum: 1,
              pageSize: 10
            }
          );
        if (res && res.data) {
          // 这里可以处理评价统计信息
          console.log('评价统计信息:', res.data);
        }
      } catch (error) {
        console.error('加载评价统计信息失败:', error);
      }
    },
    
    // 跳转到发布评价页面
    goToPublish() {
      uni.navigateTo({
        url: `/pages/review/publish?companyId=${this.companyId}&companyName=${encodeURIComponent(this.companyInfo?.companyName || '')}`
      });
    },
    
    // 重置筛选条件
    resetFilter() {
      this.selectedDept = '';
      this.selectedPosition = '';
      this.selectedRating = '';
    },
    
    // 应用筛选条件
    applyFilter() {
      this.showFilterPopup = false;
      
      // 根据筛选条件过滤评价
      this.filteredReviews = this.reviews.filter(review => {
        // 部门筛选
        if (this.selectedDept && !review.position.includes(this.selectedDept)) {
          return false;
        }
        
        // 职位筛选
        if (this.selectedPosition && !review.position.includes(this.selectedPosition)) {
          return false;
        }
        
        // 评分筛选
        if (this.selectedRating) {
          const ratingValue = parseInt(this.selectedRating);
          if (review.score < ratingValue) {
            return false;
          }
        }
        
        return true;
      });
    },
    
    // 点赞评价
    async likeReview(reviewId) {
      const reviewIndex = this.filteredReviews.findIndex(r => r.id === reviewId);
      if (reviewIndex !== -1) {
        const review = this.filteredReviews[reviewIndex];
        try {
          // 保存原始状态以便回滚
          const originalLiked = review.liked;
          const originalLikes = review.likes;
          
          // 更新UI状态
          review.liked = !review.liked;
          review.likes += review.liked ? 1 : -1;
          
          // 调用后端接口
          const response = await likeReview(reviewId);
          if (!response.success) {
            // 如果后端操作失败，回滚状态
            review.liked = originalLiked;
            review.likes = originalLikes;
            throw new Error('点赞操作失败');
          }
        } catch (error) {
          console.error('点赞失败:', error);
          // 回滚状态
          review.liked = !review.liked;
          review.likes -= review.liked ? 1 : -1;
          uni.showToast({
            title: '操作失败',
            icon: 'none'
          });
        }
      } else {
        uni.showToast({
          title: '未找到评价',
          icon: 'none'
        });
      }
    },
    
    // 收藏评价
    async collectReview(reviewId) {
      const reviewIndex = this.filteredReviews.findIndex(r => r.id === reviewId);
      if (reviewIndex !== -1) {
        const review = this.filteredReviews[reviewIndex];
        try {
          // 保存原始状态以便回滚
          const originalCollected = review.collected;
          
          // 更新UI状态
          review.collected = !review.collected;
          
          // 调用后端接口
          const response = await collectReview(reviewId);
          if (!response.success) {
            // 如果后端操作失败，回滚状态
            review.collected = originalCollected;
            throw new Error('收藏操作失败');
          }
          
          uni.showToast({
            title: review.collected ? '收藏成功' : '取消收藏',
            icon: 'success'
          });
        } catch (error) {
          console.error('收藏失败:', error);
          // 回滚状态
          review.collected = !review.collected;
          uni.showToast({
            title: '操作失败',
            icon: 'none'
          });
        }
      } else {
        uni.showToast({
          title: '未找到评价',
          icon: 'none'
        });
      }
    },
    
    // 查看评价详情
    viewReviewDetail(reviewId) {
      uni.navigateTo({
        url: '/pages/review/detail?id=' + reviewId
      });
    },
    
    // 跳转到评价评论页面
    toReviewComments(reviewId) {
      uni.navigateTo({
        url: '/pages/review/comments?id=' + reviewId
      });
    },
    
    // 加载更多评价
    async loadMoreReviews() {
      if (this.loadingMore) {
        return; // 防止重复加载
      }
      
      this.loadingMore = true;
      try {
        const params = {
          companyId: this.companyId,
          pageNum: this.currentPage + 1,
          pageSize: 10
        };
        
        const res = await getUserReviews(params);
        if (res && res.data && res.data.list && res.data.list.length > 0) {
          const newReviews = res.data.list.map(item => ({
            id: item.reviewId || item.id,
            userName: item.isAnonymous ? '匿名用户' : (item.userName || '未知用户'),
            userAvatar: item.userAvatar || '/static/images/default-avatar.png',
            position: `${item.department || ''} · ${item.position || '未知职位'}`,
            time: item.createTime || item.time || '',
            score: item.overallRating !== undefined ? item.overallRating : (item.score || 0),
            content: item.content || '',
            pros: item.pros || '',
            cons: item.cons || '',
            likes: item.likeCount !== undefined ? item.likeCount : (item.likes || 0),
            comments: item.commentCount !== undefined ? item.commentCount : (item.comments || 0),
            liked: item.hasLiked !== undefined ? item.hasLiked : (item.liked || false),
            collected: item.hasCollected !== undefined ? item.hasCollected : (item.collected || false)
          }));
          
          this.reviews = [...this.reviews, ...newReviews];
          this.filteredReviews = [...this.reviews];
          this.currentPage++;
          
          uni.showToast({
            title: '加载成功',
            icon: 'success'
          });
        } else {
          uni.showToast({
            title: '暂无更多评论',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('加载更多评价失败:', error);
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      } finally {
        this.loadingMore = false;
      }
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.company-header {
  display: flex;
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.company-logo {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  margin-right: 15px;
}

.company-basic {
  flex: 1;
}

.company-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.company-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.tag {
  font-size: 12px;
  color: #666;
  background-color: #f5f5f5;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 8px;
  margin-bottom: 5px;
}

.company-rating {
  display: flex;
  align-items: center;
}

.rating-num {
  font-size: 16px;
  color: #FF6600;
  margin-left: 5px;
  font-weight: bold;
}

.rating-desc {
  font-size: 14px;
  color: #666;
  margin-left: 5px;
}

.review-count {
  font-size: 14px;
  color: #999;
  margin-left: 5px;
}

.review-btn {
  width: 80px;
  height: 36px;
  line-height: 36px;
  background-color: #F66;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  padding: 0;
  align-self: center;
}

.rating-detail {
  display: flex;
  padding: 20px 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.rating-overview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30%;
}

.big-score {
  font-size: 40px;
  font-weight: bold;
  color: #FF6600;
}
.big-score-error {
  font-size: 18px;
  font-weight: bold;
  color: #FF6600;
}
.score-desc {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.rating-categories {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rating-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.rating-item:last-child {
  margin-bottom: 0;
}

.category {
  font-size: 14px;
  color: #666;
  width: 80px;
}

.category-score {
  font-size: 14px;
  color: #333;
  width: 40px;
  text-align: center;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background-color: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #FF6600;
  border-radius: 4px;
}

.company-intro {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

.intro-content {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  text-align: justify;
}

.reviews-section {
  background-color: #fff;
  padding: 15px;
}

.reviews-section .section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter {
  font-size: 14px;
  color: #36D;
  display: flex;
  align-items: center;
}

.review-list {
  margin-top: 15px;
}

.review-item {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.review-item:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  margin-bottom: 10px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.user-position {
  font-size: 12px;
  color: #666;
  /* margin-left: 10px; */
}

.review-time {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}

.review-score {
  display: flex;
  align-items: center;
  color: #FF6600;
  font-weight: bold;
}

.review-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 10px;
}

.review-pros-cons {
  margin: 10px 0;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 10px;
}

.pros, .cons {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.pros:last-child, .cons:last-child {
  margin-bottom: 0;
}

.label {
  font-weight: bold;
  margin-right: 5px;
}

.pros .label {
  color: #090;
}

.cons .label {
  color: #F33;
}

.content {
  color: #666;
}

.review-metrics {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.metric-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 12px;
  color: #999;
}

.metric-item text {
  margin-left: 5px;
}

.metric-item .liked {
  color: #36D;
}

.load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  margin-top: 10px;
  font-size: 14px;
  color: #36D;
}

.filter-popup {
  width: 100%;
}

.filter-content {
  background-color: #fff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 15px;
}

.filter-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.filter-group {
  margin-bottom: 15px;
}

.filter-label {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
  display: block;
}

.filter-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-item {
  font-size: 14px;
  color: #666;
  background-color: #f5f5f5;
  padding: 5px 15px;
  border-radius: 20px;
}

.filter-item.active {
  background-color: #36D;
  color: #fff;
}

.filter-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.reset-btn, .confirm-btn {
  flex: 1;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  font-size: 16px;
}

.reset-btn {
  background-color: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background-color: #36D;
  color: #fff;
}
.company-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.meta-item {
  font-size: 12px;
  color: #666;
  background-color: #f0f0f0;
  padding: 2px 6px;
  border-radius: 4px;
}
</style>